/**
 * 评估项编辑弹窗组件
 */
import React from 'react';
import { X } from 'lucide-react';
import type { EvaluationItem } from '@/types/ProofMapper';
import MaterialsInput from './MaterialsInput';

interface EditItemDialogProps {
  item: Partial<EvaluationItem>;
  modules: string[];
  categories: string[];
  onSave: (item: Partial<EvaluationItem>) => void;
  onCancel: () => void;
}

const EditItemDialog: React.FC<EditItemDialogProps> = ({
  item,
  modules,
  categories,
  onSave,
  onCancel
}) => {
  const [editForm, setEditForm] = React.useState<Partial<EvaluationItem>>(item);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSave(editForm);
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
      <div className="bg-white dark:bg-card rounded-lg border border-border p-6 w-full max-w-2xl mx-4">
        <div className="flex items-center justify-between mb-6">
          <h3 className="text-lg font-semibold text-foreground">
            {item.id ? '编辑评估项' : '新增评估项'}
          </h3>
          <button
            onClick={onCancel}
            className="p-2 hover:bg-muted rounded-full transition-colors"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <form onSubmit={handleSubmit} className="space-y-4">
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label className="block text-sm font-medium text-foreground mb-1">
                评估模块
              </label>
              <select
                value={editForm.module || ''}
                onChange={(e) => setEditForm({ ...editForm, module: e.target.value })}
                className="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
                required
              >
                <option value="">选择模块</option>
                {modules.map(module => (
                  <option key={module} value={module}>{module}</option>
                ))}
              </select>
            </div>

            <div>
              <label className="block text-sm font-medium text-foreground mb-1">
                类别
              </label>
              <select
                value={editForm.category || ''}
                onChange={(e) => setEditForm({ ...editForm, category: e.target.value })}
                className="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
                required
              >
                <option value="">选择类别</option>
                {categories.map(category => (
                  <option key={category} value={category}>{category}</option>
                ))}
              </select>
            </div>
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              查验点
            </label>
            <textarea
              value={editForm.checkpoint || ''}
              onChange={(e) => setEditForm({ ...editForm, checkpoint: e.target.value })}
              className="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring resize-y"
              rows={3}
              placeholder="输入查验点描述"
              required
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              所需证明材料
            </label>
            <MaterialsInput
              value={editForm.materials || []}
              onChange={(materials) => setEditForm({ ...editForm, materials })}
            />
          </div>

          <div>
            <label className="block text-sm font-medium text-foreground mb-1">
              备注
            </label>
            <textarea
              value={editForm.notes || ''}
              onChange={(e) => setEditForm({ ...editForm, notes: e.target.value })}
              className="w-full px-3 py-2 border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring resize-y"
              rows={3}
              placeholder="输入备注信息（可选）"
            />
          </div>

          <div className="flex items-center justify-end gap-3 mt-6">
            <button
              type="button"
              onClick={onCancel}
              className="px-4 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              取消
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-primary text-primary-foreground text-sm rounded-md hover:bg-primary/90 transition-colors"
            >
              保存
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default EditItemDialog;
